<template>
  <div class="tree-node">
    <!-- 节点内容 -->
    <div
      class="nav-link"
      @click="handleClick(node)"
      :class="{ active: node.active }"
    >
      <slot name="node-prefix" :node="node"></slot>
      <span class="nav-text">{{ node.label }}</span>
      <span
        class="arrow"
        v-if="node.children && node.children.length > 0"
        :class="{ rotate: node.expanded }"
      >
        ▼
      </span>
    </div>

    <!-- 递归渲染子节点 -->
    <transition name="slide">
      <div
        v-if="node.children && node.children.length > 0 && node.expanded"
        class="submenu"
      >
        <tree-node
          v-for="(child, index) in node.children"
          :key="index"
          :node="child"
          :parent="node"
          @node-click="handleChildClick"
          @update:active="handleActiveUpdate"
        >
          <template v-slot:node-prefix="{ node }">
            <slot name="child-node-prefix" :node="node"></slot>
          </template>
        </tree-node>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true
    },
    parent: {
      type: Object,
      default: null
    }
  },
  methods: {
    handleClick(node) {
      // 如果有子菜单则切换展开状态
      if (node.children && node.children.length > 0) {
        node.expanded = !node.expanded;
      }
      
      // 触发点击事件，传递节点和父节点信息
      this.$emit('node-click', node, this.parent);
      this.$emit('update:active', node);
    },
    
    handleChildClick(childNode, parentNode) {
      // 向上冒泡子节点点击事件
      this.$emit('node-click', childNode, parentNode);
    },
    
    handleActiveUpdate(activeNode) {
      // 向上冒泡激活状态更新
      this.$emit('update:active', activeNode);
    }
  },
  // 递归组件注册
  components: {
    TreeNode: {
      name: 'TreeNode',
      extends: function() { return this; }
    }
  }
};
</script>

<style scoped>
.tree-node {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  color: #303133;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.nav-link:hover {
  background-color: #e9f0fb;
  color: #1890ff;
}

.nav-link.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-right: 3px solid #1890ff;
  font-weight: bold;
}

.nav-text {
  flex: 1;
}

.arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.arrow.rotate {
  transform: rotate(180deg);
}

.submenu {
  /* background-color: #fff; */
  padding-left: 10px;
}

.submenu .nav-link {
  padding-left: 36px;
  font-size: 13px;
  color: #606266;
}

.submenu .nav-link:hover {
  background-color: #f2f3f5;
  color: #1890ff;
}

.submenu .nav-link.active {
  color: #1890ff;
  font-weight: 500;
  background-color: #f0f7ff;
  font-weight: bold;
}

/* 过渡动画 */
.slide-enter-active,
.slide-leave-active {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.slide-enter-from,
.slide-leave-to {
  max-height: 0;
}

.slide-enter-to,
.slide-leave-from {
  max-height: 1000px; /* 足够大的值来容纳子节点 */
}
</style>